var banners = document.querySelectorAll(".banner-list>li");
var banner_btns =document.querySelectorAll(".banner-btn");
var num = 0;
var flag = true;
var arrow = document.querySelector(".arrow");
var arrow_left = arrow.querySelector(".icon-arrow_left");
var arrow_right = arrow.querySelector(".icon-arrow_right");

function move() {
    for(var i=0;i<banner_btns.length;i++){
        banners[i].classList = "banner-img";
        banner_btns[i].classList = "banner-btn";
    }
    banners[num].classList = "banner-img banner-zb";
    banner_btns[num].classList = "banner-btn banner-btn-on";
}

for(var i=0;i<banner_btns.length;i++){
    var banner_btn = banner_btns[i];
    banner_btn.index = i;
    banner_btn.addEventListener("mouseover",function () {
        flag = false;
        num = this.index;
        move(num);
    },false)
    banner_btn.addEventListener("mouseout",function () {
        flag = true;
    })

    var banner_img = banners[i];
    banner_img.addEventListener("mouseover",function () {
        flag = false;
    })
    banner_img.addEventListener("mouseout",function () {
        flag = true;
    })

    arrow.addEventListener("mouseover",function () {
        flag = false;
    })
    arrow.addEventListener("mouseout",function () {
        flag = true;
    })
}

arrow_left.addEventListener("click",function(){
    num--;
    num = num < 0 ? 4:num;
    move();
})
arrow_right.addEventListener("click",function(){
    num++;
    num = num > 4 ? 0:num;
    move();
})

setInterval(function () {
    if(flag){
        num++;
        num = num > 4 ? 0:num;
        move(num);
    }
},4000)


var ev_banner = document.querySelector(".ev-banner-list");
var ev_img = ev_banner.querySelectorAll("li");
var ev_btns =document.querySelectorAll(".ev-btns>li");
var e_num = 0;

function evmove() {
    for(var j=0;j<2;j++){
        // j = j > 1 ? 0 : j;
        ev_btns[j].classList = "ev-btn";
    }
    ev_banner.style.marginLeft = -1104 * e_num + "px";
    if(e_num >= 2){
        setTimeout(function () {
            ev_banner.style.transition = "all 0s";
            ev_banner.style.marginLeft = 0 + "px";
            
        },300)
        e_num = 0;
    }
    ev_banner.style.transition = "all .3s";
    var a = e_num-1<0?0:e_num;
    ev_btns[a].classList = "ev-btn ev-btn-on";
    
    
}
// for (var j = 0; j < ev_btns.length; j++) {
//     var ev_btn = ev_btns[j];
//     ev_btn.index = j;
//     ev_btn.addEventListener("click",function () {
        
//     })
// }



setInterval(function () {
    e_num = e_num > 2 ? 0 : e_num
    evmove();
    e_num++;
        
},2000);